<template>
  <!-- 疫苗详情 -->
  <view class="pages">
    <view class="content">
      <view class="content_title">
        <view>
          <view class="title_top"
            >{{ detailInfo?.vaccine_info?.name
            }}<text>{{
              `第${detailInfo?.doses}/${detailInfo?.vaccine_info?.total_doses}针`
            }}</text></view
          >
          <view class="info_box">
            <view class="type_info">{{ detailInfo?.del_params?.lei }}</view>
            <view v-if="detailInfo?.del_params?.bida == 1" class="must_info">必打</view>
            <view class="free_info">{{ detailInfo?.del_params?.type }}</view>
          </view>
        </view>
        <view v-if="isShowControls" class="top_right">
          <image
            @click="vaccineDate.open()"
            v-if="detailInfo?.vaccine_inoculability?.is_inoculability == 0"
            src="@/static/vaccine/inoculate_no.png"
            mode="scaleToFill"
          />
          <image v-else src="@/static/vaccine/inoculate.png" mode="scaleToFill" />
          <view v-if="detailInfo?.vaccine_inoculability?.is_inoculability == 0">未接种</view>
          <view v-else>已接种</view>
        </view>
        <view v-else class="top_right">
          <image
            v-if="detailInfo?.vaccine_inoculability?.is_inoculability == 0"
            src="@/static/vaccine/inoculate_no.png"
            mode="scaleToFill"
          />
          <image v-else src="@/static/vaccine/inoculate.png" mode="scaleToFill" />
          <view v-if="detailInfo?.vaccine_inoculability?.is_inoculability == 0">未接种</view>
          <view v-else>已接种</view>
        </view>
      </view>
      <view class="vaccine_time">
        <view class="time_left">
          <image src="@/static/imgs/warn_icon.png" mode="scaleToFill" />
          <view>接种日期</view>
        </view>
        <view v-if="isShowControls" class="time_right" @click="vaccineDate.open()">
          <view v-if="!detailInfo?.vaccine_inoculability?.inoculability_time">请选择</view>
          <view v-else>{{
            detailInfo?.vaccine_inoculability?.inoculability_time.split(' ')[0]
          }}</view>
          <up-icon name="arrow-right" color="#999999" size="20" top="1"></up-icon>
        </view>
        <view v-else class="time_right">
          <view v-if="!detailInfo?.vaccine_inoculability?.inoculability_time">请选择</view>
          <view v-else>{{
            detailInfo?.vaccine_inoculability?.inoculability_time.split(' ')[0]
          }}</view>
        </view>
      </view>
      <view class="subscribe_list">
        <view class="list_title">预防疾病</view>
        <view>{{ detailInfo?.vaccine_info?.disease }}</view>
      </view>
      <view class="subscribe_list">
        <view class="list_title">接种月龄</view>
        <view v-if="detailInfo?.del_params?.yueling == '0月龄'">出生当天</view>
        <view v-else>{{ detailInfo?.del_params?.yueling }}</view>
      </view>
      <view class="subscribe_list">
        <view class="list_title">疫苗介绍</view>
        <!-- <view>{{ detailInfo?.vaccine_info?.desc }}</view> -->
        <up-parse :content="detailInfo?.vaccine_info?.desc"></up-parse>
      </view>
    </view>
  </view>
  <!-- 时间选择 -->
  <!-- <h-day-time-picker
    ref="vaccineDate"
    type="日"
    :title="'设置疫苗接种时间'"
    @submit-date="handleDate($event)"
  ></h-day-time-picker> -->
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReady, onShow } from '@dcloudio/uni-app'
import { navigateBack, navigateTo, formatDate, showToast } from '@/utils'
import { getVaccineDetailApi, vaccineOperationApi } from '@/api/patients'
const vaccineDate = ref(null)
const params = ref({
  child_id: 0,
  id: 0,
})
const isShowControls = ref(true)
onLoad((o) => {
  if (o.id) {
    params.value.child_id = o.childId
    params.value.id = o.id
    getDetail()
  }
  if (o?.isshow == false || o?.isshow == 'false') {
    isShowControls.value = false
  } else {
    isShowControls.value = true
  }
})
const detailInfo = ref({})
async function getDetail() {
  const res = await getVaccineDetailApi(params.value)
  if (res?.code == 10000) {
    detailInfo.value = res?.data
    console.log(detailInfo.value)
  }
}
//疫苗接种/时间编辑
const setDateParames = ref({
  child_id: 0,
  id: 0,
  type: 1,
  time: '',
})
async function handleDate(e) {
  setDateParames.value.time = e.zdpdate
  setDateParames.value.child_id = params.value.child_id
  setDateParames.value.id = detailInfo?.value?.vaccine_inoculability?.id
  const res = await vaccineOperationApi(setDateParames.value)
  if (res?.code == 10000) {
    showToast('编辑成功')
    getDetail()
  }
}
</script>

<style lang="scss" scoped>
.pages {
  width: 750rpx;
  min-height: 100vh;
  background: #f6f6f6;
  font-family: PingFang SC, PingFang SC;
  display: flex;
  flex-direction: column;
  align-items: center;

  .content {
    width: 702rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 20rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30rpx;

    .content_title {
      width: 663rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;

      .title_top {
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;

        text {
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
          margin-left: 10rpx;
        }
      }

      .info_box {
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        .type_info,
        .must_info,
        .free_info {
          width: 78rpx;
          height: 38rpx;
          background: #68a0ee;
          border-radius: 6rpx;
          font-size: 26rpx;
          color: #ffffff;
          text-align: center;
          line-height: 38rpx;
        }

        .must_info {
          background: #f25a5a;
          margin: 0 10rpx;
        }

        .free_info {
          background: #54ceab;
        }
      }

      .top_right {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 26rpx;
        color: #999999;

        image {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
        }
      }
    }

    .vaccine_time {
      width: 663rpx;
      height: 100rpx;
      background: #f6f6f6;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
      margin-top: 30rpx;

      .time_left {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #000000;

        image {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
          margin-top: 3rpx;
        }
      }

      .time_right {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #999999;
      }
    }

    .subscribe_list {
      width: 663rpx;
      padding: 30rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 28rpx;
      color: #333333;
      border-bottom: 1rpx solid #f6f6f6;

      &:last-child {
        border: none;
      }

      .list_title {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>
